import { Popover, Popconfirm, message, Button } from "antd";
import { useEffect, useState } from "react";
import CommonTable from "@/components/CommonTable";
import CommonLoading from "@/components/CommonLoading";
import CommonModal from "@/components/CommonModal";
import { cloneDeep, findIndex } from "lodash";
import IconFont from "@/components/IconFont";
import styles from "./index.module.less";
import { isJSON } from "@/utils/utils.jsx";

/** 创建失败列表展示 */
function ResultModal(props) {
	const { data, handleOk, handleCancel } = props;
	const { failCount = 0, successCount = 0, failList = [] } = data;

	const [isOk, setIsOk] = useState(false);
	const [open, setOpen] = useState(false);
	const [tableData, setTableData] = useState(failList);
	const [selectRowKeys, setSelectRowKeys] = useState([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, []);

	const onOk = async () => {
		setIsOk(true);
		setOpen(false);
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		if (isOk) {
			const list = [];
			failList.forEach(item => {
				if (tableData.length) {
					if (!findIndex(tableData, ["id", item.id])) {
						list.push(item.id);
					}
				} else {
					list.push(item.id);
				}
			});
			if (list.length) {
				handleOk(list);
			} else {
				handleCancel();
			}
		} else {
			handleCancel();
		}
	};

	const columns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			fixed: "left",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "图片",
			dataIndex: "combinationGoodsImage",
			key: "combinationGoodsImage",
			width: 120,
			render: text => (
				<div>
					{text ? (
						<Popover content={<img src={text} style={{ width: 400 }} />}>
							<img src={text} style={{ width: "32px", height: "32px", borderRadius: "5px" }} />
						</Popover>
					) : (
						""
					)}
				</div>
			)
		},
		{
			title: "组合装名称",
			dataIndex: "combinationGoodsName",
			key: "combinationGoodsName",
			width: 120
		},
		{
			title: "组合编号",
			dataIndex: "combinationGoodsCode",
			key: "combinationGoodsCode",
			width: 120
		},
		{
			title: "零售价（元）",
			dataIndex: "retailPrice",
			key: "retailPrice",
			width: 120
		},
		{
			title: "已解析系统商品编码",
			dataIndex: "containSysGoodsCode",
			key: "containSysGoodsCode",
			width: 160,
			render: text => {
				return (
					<div>
						{isJSON(text)
							? JSON.parse(text).map(item => (
									<span>
										<span>{item.skuCode}</span>
										<span>（{item.num}）</span>
									</span>
								))
							: ""}
					</div>
				);
			}
		},
		{
			title: "缺失系统商品编码",
			dataIndex: "deletionSysGoodsCode",
			key: "deletionSysGoodsCode",
			width: 150,
			render: text => {
				return (
					<div>
						{isJSON(text)
							? JSON.parse(text).map(item => (
									<span>
										<span className="common-color9">{item.skuCode}</span>
										<span>（{item.num}）</span>
									</span>
								))
							: ""}
					</div>
				);
			}
		},
		{
			title: "生成时间",
			dataIndex: "createTime",
			key: "createTime",
			width: 95
		}
	];

	//批量删除
	const handleBatchDelete = () => {
		console.log("selectRowKeys123", selectRowKeys);
		if (selectRowKeys.length) {
			const arr = cloneDeep(tableData);
			selectRowKeys.forEach(item => {
				let index = findIndex(arr, ["id", item]);
				console.log("index", index);
				arr.splice(index, 1);
			});
			setTableData(arr);
		} else {
			message.info("请选择商品");
		}
	};

	//表格
	const tableProps = {
		data: tableData,
		columns,
		handleRowKey(record) {
			return record.id;
		},
		scroll: { y: "45vh" },
		rowSelection: {
			type: "checkbox",
			fixed: true,
			selectedRowKeys: selectRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				setSelectRowKeys(selectedRowKeys);
			}
		}
	};

	return (
		<CommonModal
			width="800px"
			title="创建失败"
			zIndex={1100}
			open={open}
			onOk={onOk}
			onCancel={onCancel}
			afterClose={afterClose}
			footer={
				<>
					<Popconfirm
						zIndex={1200}
						title="是否确定删除所有组合装?"
						onConfirm={() => {
							setTableData([]);
						}}
						okText="确定"
						cancelText="取消"
					>
						<Button>删除所有确定</Button>
					</Popconfirm>
					<Button type="primary" onClick={onOk}>
						确定
					</Button>
				</>
			}
		>
			<p style={{ marginBottom: "16px" }}>
				创建成功<span className="common-color10">{successCount}</span>条，失败<span className="common-color9">{failCount}</span>
				条，以下为失败的数据。
			</p>
			<Popconfirm zIndex={1200} title="确定删除?" onConfirm={() => handleBatchDelete()} okText="确定" cancelText="取消">
				<Button style={{ marginBottom: "16px" }}>删除</Button>
			</Popconfirm>
			<CommonTable {...tableProps} />
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default ResultModal;
